<script setup lang="ts">
import {useRouter} from 'vue-router'

const router = useRouter()
</script>

<template>
  <div class="activity-box">
    <van-nav-bar title="常见问题" left-text="返回" left-arrow @click-left="router.push('/personal')"/>
    <header>
      <h1>驾校预约系统 - 常见问题</h1>
    </header>
    <main>
      <section class="faq-section">
        <details>
          <summary>如何预约教练进行练车？</summary>
          <p>您可以通过我们的在线预约系统，在教练空闲时间段内选择合适的教练和时间段进行预约。请确保您已注册并登录账户。</p>
        </details>

        <details>
          <summary>预约后如何取消或更改预约？</summary>
          <p>
            您可以在预约详情页面中找到取消或更改预约的选项。请注意，在预约开始前一定时间内取消或更改预约可能需要支付一定费用。</p>
        </details>

        <details>
          <summary>如何支付培训费用？</summary>
          <p>我们支持多种支付方式，包括在线支付（如支付宝、微信支付）和线下支付（如银行转账）。具体支付方式请在预约时选择。</p>
        </details>

        <details>
          <summary>如何联系驾校客服？</summary>
          <p>您可以通过我们的客服热线电话（XXX-XXXX-XXXX）或发送邮件至info@yourdrivingschool.com与我们联系。</p>
        </details>

        <!-- 更多常见问题可以继续添加 -->
      </section>
    </main>
    <footer>
      <p>版权所有 &copy; 2023 驾校预约系统</p>
    </footer>
  </div>
</template>

<style scoped lang="less">
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  line-height: 1.6;
}

header {
  background-color: #007BFF;
  color: white;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 20px;
}

h1 {
  margin: 0;
}

.faq-section {
  max-width: 800px;
  margin: 0 auto;
}

details {
  margin-bottom: 20px;
  border-left: 4px solid #007BFF;
  padding-left: 10px;
}

summary {
  font-weight: bold;
  cursor: pointer;
  outline: none;
}

footer {
  text-align: center;
  padding: 10px 0;
  background-color: #f8f9fa;
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
